<div class="card card-body mb-4">
    <h5 class="card-title">{{ "languages.add.title" | sqxTranslate }}</h5>

    <form [formGroup]="addLanguageForm.form" (ngSubmit)="addLanguage()">
        <div class="row gx-2">
            <div class="col">
                <sqx-autocomplete
                    displayProperty="iso2Code"
                    formControlName="language"
                    formId="language"
                    formName="{{ 'common.language' | sqxTranslate }}"
                    [itemsSource]="addLanguagesSource"
                    valueProperty="iso2Code">
                    <ng-template let-language="$implicit">{{ language.iso2Code }} ({{ language.englishName }})</ng-template>
                </sqx-autocomplete>
            </div>

            <div class="col-auto">
                <button class="btn btn-success" type="submit">{{ "languages.add" | sqxTranslate }}</button>
            </div>
        </div>
    </form>
    <sqx-form-hint> {{ "languages.add.description" | sqxTranslate }} </sqx-form-hint>
</div>
